<template>
  <div class="wh" style="display: flex; flex-direction: column">
    <div @click="move">移动</div>
    <div @click="fit">显示区域</div>
    <div id="box" style="flex: 1"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { Base } from "../core/Base";
import { Map } from "ol";

let map: Map;

onMounted(() => {
  let base = new Base(document.querySelector("#box")!);
  //   console.log(base);
  map = base.map;

  // 假设我们有一个点的数组，包含经度和纬度
  const points = [
    [13.41, 52.52],
    [18.415, 52.521],
  ];
  base.creatPoints(points,'name');

});

const move = () => {
  console.log(map);
  var view = map.getView();
  var mapCenter = view.getCenter()!;
  mapCenter[0] += 50000;
  view.setCenter(mapCenter);
  map.render();
};
const fit = () => {
  map.getView().fit([104, 30.6, 104.12, 30.74], {
    size: map.getSize(),
  });
};
</script>

<style scoped>
.wh {
  width: 100%;
  height: 100%;
}
#box {
  height: 100%;
  width: 100%;
}
</style>
